import { useEffect, useRef, useState } from "react";
import * as echarts from "echarts";
import styles from "../../assets/css/PatientData/DiseaseData.module.css";
import { Table } from "antd";
import { selectDiseaseDataList } from "../../api/PatientData/DiseaseData";
export default function DiseaseData() {
  // 第一行
  const [annular, setAnnular] = useState({}); //数据
  const ChartAnnularRef = useRef(null); //数据
  const [equipment, setEquipment] = useState({}); // 器材
  const ChartLineEquipmentRef = useRef(null); // 器材
  const [drug, setDrug] = useState({}); // 药品
  const ChartLineDrugRef = useRef(null); // 药品
  const [vaccine, setVaccine] = useState({}); // 疫苗
  const ChartLineVaccineRef = useRef(null); // 疫苗
  // 第二行
  const [now, setNow] = useState([]); //当前科室
  const ChartPieNowRef = useRef(null); //当前科室
  const [week, setWeek] = useState([]); //本周科室
  const ChartPieWeekRef = useRef(null); //本周科室
  const [doctor, setDoctor] = useState([]); // 今日医生
  // const ChartNowDoctorRef = useRef(null); // 今日医生
  // 第三行
  const [pillar, setPillar] = useState(); //柱状图
  const ChartPillarRef = useRef(null); //柱状图
  // 获取数据
  useEffect(() => {
    selectDiseaseDataList()
      .then((res) => {
        console.log(res);
        console.log(res.data.typeCharts);
        if (res.code === 1) {
          console.log(res.data.typeCharts);
          setPillar(res.data.typeCharts);
          setNow(res.data.curTop3);
          setDoctor(res.data.doctorList);
          setDrug(res.data.drugsCharts);
          setEquipment(res.data.equipCharts);
          setAnnular(res.data.registerCharts);
          setVaccine(res.data.vaccinesCharts);
          setWeek(res.data.weekTop3);
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }, []);
  // 挂载
  useEffect(() => {
    console.log(pillar);
    // 环形图
    if (ChartAnnularRef.current && annular) {
      const annularChart = echarts.init(ChartAnnularRef.current);
      annularChart.setOption({
        title: [],
        polar: {
          radius: [10, "60%"],
        },
        angleAxis: {
          max: 550,
          startAngle: 50,
        },
        radiusAxis: {
          type: "category",
          data: annular.type,
        },
        tooltip: {},
        series: {
          type: "bar",
          data: annular.data,
          coordinateSystem: "polar",
          label: {
            show: true,
            position: "middle",
            formatter: "{b}: {c}",
          },
        },
      });
    }
    // 器材
    if (ChartLineEquipmentRef.current && equipment) {
      const lineEquipmentChart = echarts.init(ChartLineEquipmentRef.current);
      lineEquipmentChart.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: equipment.type,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: equipment.data,
            type: "line",
            areaStyle: {},
          },
        ],
      });
    }
    // 药品
    if (ChartLineDrugRef.current && drug) {
      const lineDrugChart = echarts.init(ChartLineDrugRef.current);
      lineDrugChart.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: drug.type,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: drug.data,
            type: "line",
            areaStyle: {},
          },
        ],
      });
    }
    // 疫苗
    if (ChartLineVaccineRef.current && vaccine) {
      const lineVaccineChart = echarts.init(ChartLineVaccineRef.current);
      lineVaccineChart.setOption({
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: vaccine.type,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: vaccine.data,
            type: "line",
            areaStyle: {},
          },
        ],
      });
    }
    // 当前科室
    if (ChartPieNowRef.current && now) {
      const pieNowChart = echarts.init(ChartPieNowRef.current);
      pieNowChart.setOption({
        title: [
          {
            text: "当前科室TOP3",
            left: "center",
            textStyle: {
              fontSize: 15, // 设置标题字体大小
              fontWeight: "bold", // 设置标题字体粗细
              color: "#000", // 可以设置标题颜色
            },
          },
        ],
        polar: {
          radius: [10, "70%"],
        },
        radiusAxis: {
          max: 600,
        },
        angleAxis: {
          type: "category",
          data: now.map((item) => item.name),
          startAngle: 75,
        },
        tooltip: {},
        series: {
          type: "bar",
          data: now.map((item) => item.value),
          coordinateSystem: "polar",
          label: {
            show: true,
            position: "middle",
            formatter: "{b}",
          },
        },
        animation: false,
      });
    }

    // 本周科室
    if (ChartPieWeekRef.current && week) {
      const pieWeekChart = echarts.init(ChartPieWeekRef.current);
      pieWeekChart.setOption({
        title: [
          {
            text: "本周科室TOP3",
            left: "center",
            textStyle: {
              fontSize: 15, // 设置标题字体大小
              fontWeight: "bold", // 设置标题字体粗细
              color: "#000", // 可以设置标题颜色
            },
          },
        ],
        polar: {
          radius: [10, "70%"],
        },
        radiusAxis: {
          max: 5500,
        },
        angleAxis: {
          type: "category",
          data: week.map((item) => item.name),
          startAngle: 75,
        },
        tooltip: {},
        series: {
          type: "bar",
          data: week.map((item) => item.value),
          coordinateSystem: "polar",
          label: {
            show: true,
            position: "middle",
            formatter: "{b}",
          },
        },
        animation: false,
      });
    }
    // 柱状图
    if (ChartPillarRef.current && pillar) {
      const pillarChart = echarts.init(ChartPillarRef.current);
      pillarChart.setOption({
        legend: {},
        tooltip: {},
        dataset: {
          source: [
            ["科室", "等待人次", "代缴费", "复诊"],
            ...pillar.type.map((item, index) => [
              item,
              pillar.waitdata[index],
              pillar.waitpaydata[index],
              pillar.repeatdata[index],
            ]),
          ],
        },
        xAxis: {
          type: "category",
        },
        yAxis: {},
        series: [
          { type: "bar", name: "等待人次" },
          { type: "bar", name: "代缴费" },
          { type: "bar", name: "复诊" },
        ],
      });
    }
    return () => {
      if (ChartAnnularRef.current) echarts.dispose(ChartAnnularRef.current);
      if (ChartLineEquipmentRef.current)
        echarts.dispose(ChartLineEquipmentRef.current);
      if (ChartLineDrugRef.current) echarts.dispose(ChartLineDrugRef.current);
      if (ChartLineVaccineRef.current)
        echarts.dispose(ChartLineVaccineRef.current);
      if (ChartPieNowRef.current) echarts.dispose(ChartPieNowRef.current);
      if (ChartPieWeekRef.current) echarts.dispose(ChartPieWeekRef.current);
      if (ChartPillarRef.current) echarts.dispose(ChartPillarRef.current);
    };
  }, [now, week, annular, equipment, drug, vaccine, pillar]);
  // 今日医生
  const columns = [
    {},
    {
      title: "姓名",
      dataIndex: "name",
      key: "name",
    },
    {
      title: "科室",
      dataIndex: "department",
      key: "department",
    },
    {
      title: "看诊次数",
      dataIndex: "count",
      key: "count",
    },
    {
      title: "本周处方",
      dataIndex: "file",
      key: "file",
    },
    {
      title: "患者满意度",
      dataIndex: "rating",
      key: "rating",
    },
    {
      title: "医院评级",
      dataIndex: "type",
      key: "type",
    },
  ];
  return (
    <div className={styles.bigBox}>
      <div className={styles.top}>
        {/* 环形 */}
        <div className={styles.annular} ref={ChartAnnularRef}></div>
        {/* 折线 */}
        {/* 器材 */}
        <div>
          <div>
            <div className={styles.total}>{equipment.total}</div>
            医疗器材消耗
            <div className={styles.line} ref={ChartLineEquipmentRef}></div>
          </div>
        </div>
        {/* 药品 */}
        <div>
          <div className={styles.total}>{drug.total}</div>
          药品消耗
          <div
            className={styles.line}
            ref={ChartLineDrugRef}
            style={{ width: "380px" }}
          ></div>
        </div>

        {/* 疫苗 */}
        <div>
          <div className={styles.total}>{vaccine.total}</div>
          疫苗综合消耗
          <div className={styles.line} ref={ChartLineVaccineRef}></div>
        </div>
      </div>
      {/* 当前科室 */}
      <div className={styles.middle}>
        <div
          className={styles.pie}
          style={{ width: "300px", height: "300px" }}
          ref={ChartPieNowRef}
        ></div>
        {/* 本周科室 */}
        <div
          className={styles.pie}
          style={{ width: "300px", height: "300px" }}
          ref={ChartPieWeekRef}
        ></div>
        {/* 今日医生 */}
        <div className={styles.tableText}>
          <div className={styles.title}>今日医生</div>
          <Table
            dataSource={doctor}
            columns={columns}
            pagination={false}
            className={styles.table}
            size="small"
          />
        </div>
      </div>
      <div className={styles.bottom}>
        {/* 柱状图 */}
        <div
          className={styles.pillar}
          style={{ width: "1500px", height: "300px" }}
          ref={ChartPillarRef}
        ></div>
      </div>
    </div>
  );
}
